<template>
  <div class='video-activity-box  flex flex-1 both-100'>
    <transition name="fade-transform" mode="out-in">
      <div :class="gridStyle">
        <div class="video-box img-container flex-column" v-for="(item, index) in videoList" :key="index">
          <div class="video-preview">
            <VideoPreview :elementId="item.id" :code="item.id" />
          </div>
          <div class="video-content">
            <ul class="video-content-list">
              <li class="label flex info">
                <span class="title">编号：</span> {{ item.id }}
              </li>
              <li class="name flex info">
                <span class="title">名称：</span> {{ item.label }}
              </li>
            </ul>
          </div>
          <div class="img-contaienr__footer"></div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import VideoPreview from '@/components/VideoPreview'
export default {
  props: {
    videoList: {
      type: Array
    },
    grid: {
      type: String,
      default: 'box2-2'
    }
  },
  data () {
    return {
      videoId: 'video1',
      videoId2: 'video2',
      gridStyle: 'box2-2'
    };
  },
  computed: {},
  watch: {},
  methods: {
    setGrid (grid) {
      if(grid === '') {
        this.gridStyle = this.grid
      }else {
        this.gridStyle = grid
      }
    }
  },
  created () {
    console.log(this.videoList)
  },
  mounted () {

  },
  components: {
    VideoPreview,
  },
}
</script>

<style lang='less' scoped>
.video-activity-box {
  display: flex;
  align-items: center;
  transition: all 0.5s;
}
.box1-1 {
  /*vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100*/
  /*vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100*/
  width: 100vw;
  height: 100%;
  display: grid; /* 开启grid布局*/
  grid-template-columns: repeat(1, 100%);
  grid-template-rows: repeat(1, 93%);
  grid-column-gap: 2vh;
  grid-row-gap: 2vh;
  overflow: auto;
  transition: all 0.5s;
}
.box2-2 {
  /*vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100*/
  /*vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100*/
  width: 100vw;
  height: 100%;
  display: grid; /* 开启grid布局*/
  grid-template-columns: repeat(2, 49%);
  grid-column-gap: 2vh;
  grid-row-gap: 2vh;
  overflow: auto;
  .video-box {
    height: 36vh;
  }
}
.box3-3 {
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 32%);
  grid-column-gap: 2vh;
  grid-row-gap: 2vh;
  overflow: auto;
 .video-box {
    height: 23vh;
  }
}
.box4-4 {
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 24%);
  grid-template-rows: repeat(4, 23%);
  grid-column-gap: 2vh;
  grid-row-gap: 2vh;
  overflow: auto;
   .video-box {
    height: 16vh;
  }
  
}

.video-box {
  width: 100%;
  background-color: rgba(8, 18, 29, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  .video-preview {
    width: 100%;
    height: 75%;
  }
  .video-content {
    display: flex;
    flex: 1;
    font-size: 14px;
    align-items: center;
    .video-content-list {
      .title {
        color: rgba(48, 158, 255, 0.2);
      }
      .info {
        font-size: 14px;
        color: #fff;
      }
    }
  }
}

.null-div {
  /*隐藏*/
  visibility: hidden;
}

.main-box {
  /*使内部div居中*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*背景颜色*/
  background-color: cornsilk;
  width: 100vw;
  height: 80vh;
}
</style>